<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        canvas{
            border:1px solid black;
        }
    </style>

</head>
<body>
    <canvas width=600 height=400 id="cas"></canvas>
    <script>
        var cas = document.getElementById("cas");
        var ctx = cas.getContext("2d")
        var paddingLeft =30;
        var paddingRight =20;
        var paddingTop =40;
        var paddingBottom =50;
        var arrowWidth = 30;
        var arrowHeight=20;
        var X0 = paddingLeft;
        var Y0 = cas.height - paddingBottom;
        var maxX = cas.width-paddingRight-arrowHeight-paddingLeft;
        var maxY = cas.height - paddingTop - paddingBottom - arrowHeight;
        ctx.moveTo(X0,Y0)
        ctx.lineTo(maxX+arrowHeight,Y0);
      
        ctx.moveTo(X0,Y0)
        ctx.lineTo(X0,paddingTop);
        ctx.stroke();
        
        // ctx.closePath();
         ctx.beginPath();
        // -----y轴箭头
        ctx.moveTo(X0,paddingTop)
        ctx.lineTo(X0-arrowWidth/2,paddingTop+arrowHeight);
        ctx.lineTo(X0,paddingTop+arrowHeight/2)
        ctx.lineTo(X0+arrowWidth/2,paddingTop+arrowHeight);
        ctx.fill();
        // ctx.stroke();
        // // -----X轴箭头
        ctx.beginPath();
      
        ctx.moveTo(maxX+arrowHeight,Y0)
        ctx.lineTo(maxX,Y0-arrowWidth/2);
        ctx.lineTo(maxX+arrowHeight/2,Y0);
        ctx.lineTo(maxX,Y0+arrowWidth/2);
        ctx.fill();
        //    ctx.stroke();

        // ------描点
        var arr = [[10, 20], [15, 13], [17, 30], [30, 10], [20, 15]];
        // for(var i = 0 ; i<arr.length-1; i++){
        //     for(var j = 0; j<arr.length-1-i; j++){
        //         if(arr[ j ][ 0 ] > arr[ j + 1 ][ 0 ]){
        //             var ta = arr[j]
        //             arr[j] = arr[j+1]
        //             arr[j+1] = ta;

        //         }
        //     }
        // }
        arr.sort(function(a,b){
            return a[0] - b[0]
        })

        
        var arr3 = []
        console.log(arr3)
        var t = arr.map(function(item,index){
            // return(item);//得到数组里的每一项
            // console.log(item[0]); 拿到每个数组里的第一项
            return item[0]  //作为一个返回值将每个数组的第一项返回给函数，存在变量t里

        })
        // 用map拿到数组X轴最大值
        var arrMaxX = Math.max.apply(null,arr.map(function(item){ return item[0]}))
        // console.log(arrMaxX);
        //用for循环拿到数组Y轴最大值
        var arrMaxY = arr[0][1];
        for(var i = 0; i<arr.length; i++){
            if(arrMaxY < arr[i][1]){
              arrMaxY = arr[i][1]
            }
        }
        console.log(arrMaxY);

        // 循环制点
        // 坐标在坐标轴中的坐标
        // var X2 = X0 + X;
        // var Y2 = Y0- Y;
        ctx.beginPath();

      
        for(var i = 0 ; i < arr.length; i++){
            var X = arr[i][0]
            var Y = arr[i][1]
            var X = X*maxX/arrMaxX 
            var Y = Y*maxY/arrMaxY
            var stemX = X0 + X;
            var stemY = Y0 - Y; 
            console.log(stemY)
            arr3.push([stemX,stemY]);
       
            ctx.moveTo(stemX-4,stemY-4);
            ctx.lineTo(stemX+4,stemY-4);
            ctx.lineTo(stemX+4,stemY+4);
            ctx.lineTo(stemX-4,stemY+4);
             ctx.closePath();
            ctx.stroke();
            ctx.fillStyle="red";
            ctx.fill();
        }
        // console.log(arr3);
        // 排序for sort
       
        //   console.log(arr3);
      
        //  连线
        ctx.beginPath();
          var t = ['moveTo','lineTo'];
          arr3.forEach(function(v,i){
              ctx[t[i==0?0:1]](v[0],v[1]);
          })
          ctx.stroke();

    </script>
</body>
</html>